<template>
  <div class="mainWapper" :style="{width:width,height:height}">
    <main-header></main-header>
    <left-menu></left-menu>
    <router-view></router-view>
    <main-footer></main-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery'
  import MainHeader from './components/MainHeader'
  import MainFooter from './components/MainFooter'
  import LeftMenu from './components/LeftMenu'
  export default{
    data () {
      return {
        msg: 'hello vue',
        height: 0,
        width: '100%'
      }
    },
    mounted () {
      var that = this
      that.getHeight()
      $(window).on('resize', () => {
        that.getHeight()
      })
      this.$router.push('/index')
    },
    computed: {},
    methods: {
      getHeight () {
        this.height = `${$(window).innerHeight()}px`
      }
    },
    components: {
      MainHeader,
      MainFooter,
      LeftMenu
    }
  }
</script>

<style lang="css">
  *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  .mainWapper {
    position: relative;
    width: 100%;
    border: 1px #ccc solid;
  }
</style>
